<template>
  <div>
    <!--工具类-->

    <div >

      <!--          <span style="margin-left: 10px; color: #19be6b;" v-if="isOnline">Live Chat座席在线</span>-->
      <!--          <span style="margin-left: 10px;" v-else>Live Chat座席已下线</span>-->
      <alert type="warning" v-show="!isCustomerService">您还不是Live Chat座席, 请先联系管理人员为你创建坐席账户.</alert>
    </div>

    <Row type="flex" justify="space-between" >
      <div style="display:inline-block" class="tiy_margin8">

        <div style="float:left" v-show="!isLoading">
          <Checkbox v-model="refresh" ><span v-if="!refresh">勾选后将自动更新消息</span>
            <span v-if="refresh" class="refresh" v-text="refreshTime+'秒后将自动刷新'"></span
            ></Checkbox>
        </div>
        <span v-show="isLoading">消息刷新中...</span>
        <Icon type="md-refresh-circle" :class="isLoading?'loading':''" style="font-size: 1.1rem;color: #bdbdbd;cursor: pointer" title="刷新消息"  @click="search()"/>

      </div>

      <div class="y_query_right">
        <Button type="info"  icon="md-analytics" class="y_condition" @click="openInNewTab()" >新窗口打开
        </Button>
        <Button type="warning"  icon="md-analytics" class="y_condition" @click="searchUnReply()" v-has=tRole.CHAT_1_101>超24小时未回复
        </Button>
        <Button type="primary" icon="ios-contact-outline" class="y_condition" @click="showAssign()" v-has=tRole.CHAT_2_203 :disabled="messageSelected.length==0">批量指派
        </Button>
        <Button type="success"  icon="ios-paper-plane" class="y_condition" @click="msgAccountShow" v-has=tRole.CHAT_1_101>主动发送消息
        </Button>
      </div>
    </Row>
    <divider/>



    <Row >
      <i-col span="24" class-name="y_query_left">
        <Input v-model.trim="searchParams.userName" placeholder="请输入用户名"
               class="y_condition" clearable></Input>
        <Select placeholder="是否分配" v-model="searchParams.assigned" class="y_condition" clearable @on-clear="this.searchParams.assigned=''"	style="text-align: left;">
          <Option :value=1 :key=true >已分配</Option>
          <Option :value=0 :key=false >未分配</Option>
        </Select>

        <Select placeholder="会话状态" v-model="searchParams.messageStatus" class="y_condition"
                clearable @on-clear="this.searchParams.messageStatus=null;" style="text-align: left;">
          <Option v-for="status in messageStatusDict" :value="status.value">{{status.label}}</Option>
        </Select>

        <Select placeholder="负责人" v-model="tParams.selectedEmployee" class="y_condition"
                clearable @on-clear="tParams.selectedEmployee=null;" style="text-align: left;">
          <Option v-for="employee in tData.employeeList" :value="employee.id">{{employee.userName}}</Option>
        </Select>

        <Select placeholder="标签" v-model="searchParams.tag" class="y_condition" style="text-align: left;"
                clearable filterable allow-create @on-clear="searchParams.tag=null" @on-create="createSearchTag">
          <Option v-for="tag in tags" :value="tag.value">{{tag.label}}</Option>
        </Select>



      </i-col>
    </Row>
  <Row>
    <i-col span="24" class-name="y_query_left">
      <Select placeholder="排序方式" v-model="searchParams.sortBy" class="y_condition" clearable style="text-align: left;">
        <Option value="createTime">最新回复-全部</Option>
        <Option value="userCreateTime">最新回复-用户</Option>
        <Option value="backendCreateTime">最新回复-后台</Option>
        <Option value="unreadCount" >未读消息数从高到低</Option>
      </Select>
<!--      <Checkbox v-model="searchParams.searchAll" v-has="tRole.CHAT_2_101" class="y_condition" style="min-width: 250px">查询全部（包含未分配给我的）</Checkbox>-->
      <Checkbox v-model="searchParams.onlyUnread" class="y_condition">未读数>0</Checkbox>
      <Button type="primary" style="margin-left: 16px" icon="md-search" @click="search" class="y_condition">查询会话</Button>
    </i-col>
  </Row>
    <Row>
      <div class="tip_div" style="width: 100%"  v-show="messageList.length === 0">
        <strong>操作提示 :  </strong>
        <br><br>
        <p>1. 您仅能看到分配给您的会话</p>
        <p>2. 查询结果为零时，您也会看到当前提示</p>
      </div>
    </Row>

    <List  border v-show="messageList.length > 0" style="margin: 2rem 0;">
      <ListItem style="display: flex;flex-direction: column;align-items: flex-start;">
        <Checkbox v-model="isCheckedAllMessage" @on-change="handleCheckAll">全选</Checkbox>
      </ListItem>
      <CheckboxGroup  v-model="messageSelected" @on-change="checkChange">
        <ListItem v-for="(item,index) in messageList" class="list_item" >
          <div style="width:100%">
            <Row class="list_div">
              <div class="minWidth" style="text-align: left;min-width:2rem">
                <Checkbox :label="item.userId" :disabled="item.employeeName!=undefined" :value="index">{{index+1}}</Checkbox>
              </div>

              <h5  style="min-width: 5rem;text-align: left">
                <span>{{item.encodeName?item.encodeName:$tiyHideUsername(item.userName)}}</span>
<!--                <Tooltip :content="item.userName" >-->
<!--                  <span>{{$tiyHideUsername(item.userName)}}</span>-->
<!--                </Tooltip>-->
              </h5>

              <div class="minWidth">
                <Icon type="md-mail" class="list_key" />
                <span class="list_value" v-if="item.backendUnreadCount==0" style="font-weight: 600">{{item.backendUnreadCount}}</span>
                <span v-else class="list_value" style="color: #f20077;font-weight: 600" > {{item.backendUnreadCount}}</span>
              </div>

              <div class="minWidth">
                <Icon type="md-globe" class="list_key"/><span class="list_value"> {{item.country}}</span>
              </div>

              <div class="minWidth">
                <Icon type="md-phone-portrait" class="list_key"/><span class="list_value"> {{deviceTypeLabel(item.deviceType)}}</span>
              </div>

              <div style="min-width: 10rem;">
                <Icon type="md-contact" class="list_key" /><span class="list_value">负责人：
                <span >{{item.employeeId!==undefined?item.employeeName:''}}</span>
                  <span v-has=tRole.CHAT_2_203 style="color:#2d8cf0;font-size: 13px;cursor: pointer" @click="showAssign(item.userId, item.encodeName)">
                    <span >{{item.employeeId!==undefined?'更改':'分配负责人'}}</span>
                  </span>
                </span>
              </div>

              <div class="minWidth">
                <Icon type="ios-alert" class="list_key"  />会话状态：
                <span class="list_value" style="font-weight: bold;padding-right: 0.2rem" v-text="item.messageStatus===undefined?'无':messageStatusLabel(item.messageStatus)"></span>
                <span style="color:#2D8cF0;font-size: 13px;cursor: pointer"
                      @click="showStateModal(item.userId, item.messageStatus)">
                  <span>更改</span>
                </span>
              </div>
              <div style="flex-grow: 2;text-align: right">
                <Tag color="geekblue" v-if="item.tags!=null && item.tags.length>0">
                  {{parseTags(item.tags).join(",")}}
                </Tag>
              </div>
            </Row>

            <div style="text-align: left;padding-top: 0.5rem;cursor: pointer"  @click="openChatWindow(item.userId, item.userName)">
            <span class="list_value">
<!--              <span class="list_value_black" v-if="item.type==100">
                {{item.content.length>50?item.content.substring(0,50)+'...':item.content}}
              </span>

              <span class="list_value_black"  v-else-if='item.type==200'>
                {{item.picUrl}}
              </span>
              <span class="list_value_black"  v-else-if='item.type==300'>
                send a product
              </span>
              <span class="list_value_black"  v-else-if='item.type==400'>
                send a coupon
              </span>
              <span class="list_value_black"  v-else-if='item.type==600'>
                send a link
              </span>-->
              <!--              <Icon type="ios-time" class="list_key"/>-->
<!--              {{new Date(item.createtime).toLocaleString()}}-->
              <span class="list_value" >{{getSender(item)}}发送于: {{$tiyBJTime(item.createtime)}}</span>

            </span>
            </div>

          </div>
          <div style="width: 100%;display: flex;flex-direction: row;align-items: center;">
            <Tag  color="orange" v-if="beyondTimeLimit(item)>0 && beyondTimeLimit(item)<6">已超{{beyondTimeLimit(item)}}小时未回复</Tag>
            <Tag  color="magenta" v-if="beyondTimeLimit(item)>=6 && beyondTimeLimit(item)<24">已超{{beyondTimeLimit(item)}}小时未回复</Tag>
            <Tag  color="error" v-if="beyondTimeLimit(item)>=24">已超{{beyondTimeLimit(item)}}小时未回复</Tag>
            <div style="flex-grow: 2;text-align: right">

              <Button   ghost size="default"  type="success" icon="ios-play"
                      @click="openChatWindow(item.userId, item.userName)">去回复</Button>

            </div>

          </div>

        </ListItem>
      </CheckboxGroup>
    </List>


    <div style="float: right;margin: 1rem 0" v-show="messageList.length > 0">
      <Page :total="tPage.total" :page-size="tPage.stepNumber" :current="tPage.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[40,60,80]"
            show-sizer show-elevator/>
    </div>

    <Modal ref="modal"
           :styles="{top: '20px',bottom:'20px',width:'90%',}"
           :scrollable=false :closable=true v-model="isShowDetail" :mask-closable="false"
           :footer-hide="true">
      <chat-message-detail :detailShow="isShowDetail" :userId="currentUserId" @refreshList="webList" @hideDetail="hideDetail()"></chat-message-detail>
    </Modal>
    <!-- 消息发送人列表 -->
    <Modal
      v-model="status.modalMessageAccount.isShow"
      title="消息推送人" :styles="{align:'center',width: '50%'}"
      :mask-closable="false" :scrollable=true>
      <div slot="footer"></div>
      <div class="message_detail">
        <Row style="padding-top: 10px;text-align: left">
          <i-col span="20">
            <div>
              <Input v-model.trim="messageAccountParam.firstName" placeholder="请输入用户名"
                     class="modal_newuser_form_input" clearable></Input>
              <Button type="primary" style="margin-left: 16px" icon="md-search" @click="searchAccount" >查询</Button>
              <span>&nbsp;</span>
            </div>
          </i-col>
        </Row>
        <Alert style="margin-top: 10px;text-align: left" type="warning" show-icon>推送令牌未生成或用户主动关闭了通知权限时，无法即时的推送给用户。仅当用户下次打开APP或者PC账户时才会收到提示</Alert>
        <!--表格和分页-->
        <Table stripe border ref="userInfo" :columns="tableAccountTitles"
               :data="accountList" class="table_css"
               no-data-text="暂无数据" ></Table>
      </div>
    </Modal>

    <Modal
      v-model="status.modalImage.isShow"
      title=""
      :styles="{align:'center'}"
      :scrollable=true>
      <div slot="footer"></div>
      <div align="center"><Img :src="status.modalImage.url" style="max-width: 300px" /></div>
    </Modal>

    <Modal v-model="status.modalAssignUser.isShow" title="选择负责人"
           :styles="{top: '20px',bottom:'20px',width:'40%',}" :scrollable=false @on-ok="assignToEmployee()" >
      <!--表格和分页-->
      <Row >
        <i-col span="4">&nbsp;</i-col>
        <i-col span="16">
          <SearchCustomerService ref="employeeSearch" @choose-customer-service="chooseCustomerService"></SearchCustomerService>
        </i-col>
        <i-col span="4">&nbsp;</i-col>
      </Row>
    </Modal>

    <Modal v-model="status.modalStatusChange.isShow" draggable title="会话状态"
           @on-ok="complete"  :width="this.$yMobile()?'80%':'500'">
      <Select v-model="statusParam.state"  >
        <Option v-for="item in messageStatusDict" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
    </Modal>
  </div>

</template>
<!--javascript 代码-->
<script>
    import ICol from "view-design/src/components/grid/col";
    import tiyData from "./js/chatMessage/chat_message_data";
    import SearchEmployee from "../widgets/SearchEmployee";
    import {
      init,
      webList,
      sendMessage,
      msgAccountList,
      getEmployee, getCustomerService, onlineCustomerService, offlineCustomerService,
    } from "./js/chatMessage/chat_message_funs"
    import CountDown from 'vue2-countdown'
    import {isNotEmpty} from "../js/commonUtils";
    import SearchCustomerService from "../widgets/SearchCustomerService";
    import ChatMessageDetail from "./ChatMessageDetail";
    export default {
        //components: {ICol},
        components: {ChatMessageDetail, SearchCustomerService, ICol, SearchEmployee},

        data(){
            return {
                tRole:{
                    CHAT_1_101:"CHAT-1-101",
                    CHAT_2_101:"CHAT-2-101",
                    CHAT_2_203:"CHAT-2-203",
                    CHAT_2_204:"CHAT-2-204",
                    COMMON_1_100:"COMMON-1-100"
                },
                tPage: tiyData.tPage,
                status: tiyData.tStatus,
                tParams: tiyData.tParams,
                statusParam: tiyData.tParams.statusParam,
                //搜索条件
                searchParams: tiyData.tParams.searchParams,
                messageAccountParam: tiyData.tParams.messageAccountParam,
                messageSendParam: tiyData.tParams.messageSendParam,
                tData: tiyData.tData,
                messageSendRule: tiyData.tStatus.rules,
                messageList: tiyData.tData.messageList,
                accountList: tiyData.tData.accountList,
                choosedTargetUser: [],
                // tableTitles:tiyData.tableTitles(this,tiyData),
                tableAccountTitles:tiyData.tableAccountTitles(this,tiyData),
                loginTypeDict: this.$store.getters.dictionaries.loginTypeDict,
                refresh:false,
                refreshTime:60,
                timer:'',
                isShowDetail:false,
                currentUserId:'',
                isLoading:false,
                messageStatusDict:[
                    {  value: 600,label: '会话未开启'},
                    {  value: 610,label: '会话已开启'},
                    {  value: 100,label: '处理-已受理'},
                    {  value: 200,label: '处理-沟通中'},
                    {  value: 300,label: '处理-资源协调中'},
                    {  value: 400,label: '处理-受阻'},
                    {  value: 500,label: '会话关闭'}
                ],
                messageSelected:[],
                unAssignedMessage : 0,
                isCheckedAllMessage : false,
                tags: [],
                customerService: tiyData.tData.customerService,
            }
        },
        computed : {
            deviceTypeLabel(){
                return function(type){
                    var label = "后台";
                    if(type==1){
                        label="Android";
                    }else if(type==2){
                        label="IOS";
                    }else if(type==3){
                        label="PC";
                    }
                    return label;
                }

            },
            messageStatusLabel(){
                return function(type){
                 let targetItem = this.messageStatusDict.find(function (item,index){
                      return item.value === type;
                 });
                 if (targetItem===undefined){
                   return "无"
                 }else
                    return targetItem.label;
                }
            },
            isCustomerService() {
              return isNotEmpty(this.customerService.employeeId);
            },
            isOnline() {
              return this.isCustomerService && this.customerService.state == 1;
            },
        },

        methods: {

            search(){
                tiyData.tPage.currentPage = 1;
                tiyData.tParams.searchParams.searchUnReply = false;
                webList(this, tiyData);
            },
            webList() {
              webList(this, tiyData);
            },
            changePage(page){
                tiyData.tPage.currentPage = page;
                webList(this, tiyData);
            },
            sizeChange(p){
                tiyData.tPage.stepNumber = p;
                webList(this, tiyData);
            },
            showDetail(index){
                tiyData.tParams.messageDetailParam.messageId = tiyData.tData.messageList[index].id
                messageDetail(this,tiyData)
            },

            msgAccountShow(){
                tiyData.tParams.messageAccountParam.firstName = "";
                tiyData.tData.accountList.length = 0;
                tiyData.tStatus.modalMessageAccount.isShow = true;
            },
            sendMessage(){
                sendMessage(this,tiyData)
            },
            getPlatform(platform){
                let value = "";
                this.pushPlatformDict.forEach(function (item) {
                    if(item.value == platform){
                        value = item.name;
                    }
                })
                return value
            },
            getType(type){
                let value = "";
                this.messageTypeDict.forEach(function (item) {
                    if(item.value == type){
                        value = item.name;
                    }
                })
                return value
            },
            searchAccount(){
                msgAccountList(this,tiyData)
            },
            beyondTimeLimit(item){
              if(item.userCreateTime == item.createtime) { //最后一条消息是用户发送的
                let current = new Date().getTime();
                let during = current - item.createtime;
                let hours  = during/(60*60*1000);
                return  Math.ceil(hours)-1;
              }
              return 0;
            },

            toIm(userId){
                this.$router.push(
                    {
                        name: 'MessageIM',
                        params: {
                            userId: userId
                        }
                    }
                )
            },
            openChatWindow(userId, userName){ //打开用户对话窗口
                if(this.$authority("CHAT-2-201")){ //判断是否有查看对话详情的权限
                    this.isShowDetail = true;
                    this.currentUserId = userId;
                    // let routeData = this.$router.resolve({
                    //   name: 'ChatMessageDetail',
                    //   params: {
                    //     userId: userId
                    //   },
                    //   query:{
                    //       userName:userName
                    //   }
                    // });
                    // window.open(routeData.href, "_blank");
                } else {
                    this.$Modal.error({
                        title: "error",
                        content: "没有权限查看对话详情，请联系管理员！",
                        width:500
                    });
                }

            },

            hideDetail(){
                this.isShowDetail = false;
                this.currentUserId = "";
            },
            chooseEmployee(value){
                tiyData.tParams.messageStatusParam.employeeId = value.id;
            },
            chooseCustomerService(value) {
              if(value == null) {
                return;
              }
              tiyData.tParams.messageStatusParam.employeeId = value.employeeId;
              tiyData.tParams.messageStatusParam.employeeName = value.userName;
            },
            assignToEmployee(){ //分配用户给指定员工
                var self = this;
                if(!tiyData.tParams.messageStatusParam.employeeId){
                    this.$Message.error("请选择负责人！");
                    return;
                }
                //
                self.$Spin.show();
                if(tiyData.tParams.messageStatusParam.userId!=''){
                    self.$apiChat.assignToEmployee({
                        "employeeId":tiyData.tParams.messageStatusParam.employeeId,
                        "employeeName":tiyData.tParams.messageStatusParam.employeeName,
                        "userId":tiyData.tParams.messageStatusParam.userId,
                        "userEncodeName":tiyData.tParams.messageStatusParam.userEncodeName
                    }).then(function (response) {
                        self.$Spin.hide();
                        if (response.success) {
                            webList(self, tiyData);
                        } else {
                            self.$Message.error(response.errorMessage);
                        }
                    });

                }else{
                    self.$apiChat.batchAssignToEmployee({
                        "employeeId":tiyData.tParams.messageStatusParam.employeeId,
                        "employeeName":tiyData.tParams.messageStatusParam.employeeName,
                        "userIds":self.messageSelected
                    }).then(function (response) {
                        self.$Spin.hide();
                        if (response.success) {
                            webList(self, tiyData);
                        } else {
                            self.$Message.error(response.errorMessage);
                        }
                        self.messageSelected.splice(0,self.messageSelected.length);
                    });

                }

            },
            // batchAssignToEmployee(){ //批量分配
            //     var self = this;
            //     if(!tiyData.tParams.messageStatusParam.employeeId){
            //         this.$Message.error("请选择负责人！");
            //         return;
            //     }
            //     //
            //     self.$Spin.show();
            //     self.$apiChat.assignToEmployee({
            //         "employeeId":tiyData.tParams.messageStatusParam.employeeId,
            //         "userIds":self.messageSelected
            //     }).then(function (response) {
            //         self.$Spin.hide();
            //         if (response.success) {
            //             webList(self, tiyData);
            //         } else {
            //             self.$Message.error(response.errorMessage);
            //         }
            //     });
            // },
            showAssign(userId, encodeName){ //显示分配用户窗口
                //单条分配
                if(userId){
                    tiyData.tStatus.modalAssignUser.isShow = true;
                    tiyData.tParams.messageStatusParam.userId = userId;
                    tiyData.tParams.messageStatusParam.userEncodeName = encodeName;
                }else{
                    if(this.messageSelected.length==0){
                        this.$Message.error("请勾选要分配的用户！");
                        return;
                    }
                    tiyData.tStatus.modalAssignUser.isShow = true;
                    tiyData.tParams.messageStatusParam.userId='';
                }
                this.$refs['employeeSearch'].clearSelectedEmployee();
            },
            showStateModal(userId, state){ //修改状态窗口
                tiyData.tParams.statusParam.userId = userId;
                tiyData.tParams.statusParam.state = state;
                tiyData.tStatus.modalStatusChange.isShow = true;
            },
            complete(){
                var self = this;
                self.$Spin.show();
                self.$apiChat.changeMessageStatus({
                    // "statusId":tiyData.tParams.statusParam.statusId,
                    "userId": tiyData.tParams.statusParam.userId,
                    "state":tiyData.tParams.statusParam.state,
                }).then(function (response) {
                    self.$Spin.hide();
                    if (response.success) {
                        webList(self, tiyData);
                    } else {
                        self.$Message.error(response.errorMessage);
                    }
                });
            },
            checkChange(val){
                if(this.messageSelected.length == this.unAssignedMessage){
                    this.isCheckedAllMessage = true;
                } else {
                    this.isCheckedAllMessage = false;
                }
            },
            handleCheckAll(){
                // debugger;
                let self = this;
                if (this.isCheckedAllMessage) {
                    tiyData.tData.messageList.forEach(function (item){
                        if(!item.employee_id){
                            self.messageSelected.push(item.userId);
                        }
                    })
                } else {
                    this.messageSelected = [];
                }
            },

          openInNewTab(){
            let routeUrl = this.$router.resolve({
              path: "/chat/chatMessage"
            });
            window.open(routeUrl .href, '_blank');
          },
            searchUnReply() {
              tiyData.tPage.currentPage = 1;
              tiyData.tParams.searchParams.searchUnReply = true;
              webList(this, tiyData);
            },
            getSender(item) {
              return item.direction == 1?"用户":"后台";
            },
            parseTags(tags) {
                return this.$toJson(tags);
            },
            createSearchTag(query) {
                if(this.tags.find(function (tag) {
                  return query == tag.value;
                })==null) {
                  this.tags.push({value: query, label: query});
                }
            },
        },
        watch: {
            refresh(newName, oldName) {
                var self = this;
                if(newName){
                    self.timer = setInterval(function(){
                        if(self.refreshTime==1){
                            self.refreshTime--;
                            webList(self, tiyData);
                            // self.refreshTime = 60;
                        }else{
                            self.refreshTime--;
                        }
                    },1000)
                }else{
                    self.refreshTime = 60;
                    clearInterval(self.timer);
                }
            },
            // isLoading(newName, oldName){
            //     if(newName){
            //
            //
            //
            //     }
            //
            // }
        },

        mounted(){
            init(this, tiyData);
            getEmployee(this, tiyData);
            getCustomerService(this, tiyData);
            // webList(this, tiyData);
        },
        beforeDestroy() {
          if(this.timer != null) {
            clearInterval(this.timer);
          }
        }
    }
</script>

<!--css样式-->
<style scoped lang="less">
@import  (once,optional)  "../css/base.less";

  .table_css {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .modal_newuser_form {
    padding-left: 60px;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .modal_newuser_form_input{
    width: 180px;
    margin-right: 10px;
  }
  .form_step{
    width: 250px;
    margin-right: 10px;
  }
  .modal_active_form{
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .tiy_class_key {
    color:@tiyTextLightColor;
    display:inline-block;
    text-align: right;
    padding-right: 0.5rem;
  }

  .message_detail {
    padding: 1rem;
  }


  .list_item{
    display: flex;flex-direction: column;align-items: flex-start;
  }
  .list_item:hover{
    background: @tiySectionColor;
  }


  .list_div{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }



  .list_key{
    font-size: 14px;
    color: @tiyTextLightColor;
    padding: 0rem 0.3rem;
  }
  .list_value{
    font-size: 13px;
    color: @tiyTextDescColor;
    padding-right: 1rem;
    word-wrap:break-word;
    word-break:break-all;
    overflow: hidden;
  }
  .loading{
    transform: rotate(360deg);
    animation: 0.5s linear 0s infinite normal none running rotation;
  }


  .minWidth{
    min-width: 5rem;
  }

  .list_value_black{
    .list_value;
    color: @tiyTextNormalColor;
  }
  .tip_div{
    background: @tiyPrimaryLightColor;
    padding: 1rem 2rem;
    margin: 3rem 0rem;
    min-height: 10rem;

  }

</style>
